<template>
	<view class="app">
		<view class="top">
			<view style="color: red;" @click="shiyong">待使用(10)</view>
			<view class="guo" @click="guoqi">已过期(1)</view>
		</view>
		<view v-if="flag">
			<view class="cen">
				<view class="left"><img src="../../static/3.png" alt=""></view>
				<view class="right">
					<view style="margin-bottom: 30rpx;">全平台</view>
					<view>2019.01.01-2019.02.02</view>
				</view>
			</view>
			<view class="cen">
				<view class="left"><img src="../../static/3.png" alt=""></view>
				<view class="right">
					<view style="margin-bottom: 30rpx;">定制工作服</view>
					<view>2019.01.01-2019.02.02</view>
				</view>
			</view>
			<view class="cen">
				<view class="left"><img src="../../static/3.png" alt=""></view>
				<view class="right">
					<view style="margin-bottom: 30rpx;">全平台</view>
					<view>2019.01.01-2019.02.02</view>
				</view>
			</view>
			<view class="cen">
				<view class="left"><img src="../../static/3.png" alt=""></view>
				<view class="right">
					<view style="margin-bottom: 30rpx;">定制工作服</view>
					<view>2019.01.01-2019.02.02</view>
				</view>
			</view>
			<view class="cen">
				<view class="left"><img src="../../static/3.png" alt=""></view>
				<view class="right">
					<view style="margin-bottom: 30rpx;">定制工作服</view>
					<view>2019.01.01-2019.02.02</view>
				</view>
			</view>
		</view>
		
		<view v-if="flag1">
			<view class="cen">
				<view class="left"><img src="../../static/4.png" alt=""></view>
				<view class="right">
					<view style="margin-bottom: 30rpx;">全平台</view>
					<view>2019.01.01-2019.02.02</view>
				</view>
			</view>
			
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				flag:true,
				flag1:false
			}
		},
		methods: {
			shiyong(){
				this.flag=true,
				this.flag1=false
			},
			guoqi(){
				this.flag=false,
				this.flag1=true
			}
		},
		
	}
</script>

<style lang="scss" scoped>

	.app{
		width: 100%;
		
	}
	.top{
		display: flex;
		justify-content: space-around;
		margin: 30rpx;
		font-size: 16px;
	}
	.cen{
		width: 90%;
		margin: 20rpx auto;
		display: flex;
	}
	.left{
		flex: 1;
		padding-right: 40rpx;
	}
	.left img{
		width: 100%;
		border-radius: 20rpx;
	}
	.right{
		flex: 2;
		display: flex;
		justify-content: center;
		flex-direction: column;
		font-size: 16px;
	}
	.guo:hover{
		color: red;
	}
</style>
